<template>
  <div ref="element" class="chart"></div>
</template>

<script setup>
import {onMounted, ref} from "vue";
import useEchart from "../hooks/useEchart.js";

const element = ref()
const {renderEchart} = useEchart()

onMounted(() => {
  const option = {
    legend: {
      show: false
    },
    series: [
      {
        name: 'Nightingale Chart',
        type: 'pie',
        radius: [20, 80],
        center: ['50%', '50%'],
        roseType: 'area',
        itemStyle: {
          borderRadius: 8
        },
        data: [
          { value: 40, name: 'rose 1' },
          { value: 38, name: 'rose 2' },
          { value: 32, name: 'rose 3' },
          { value: 30, name: 'rose 4' },
          { value: 28, name: 'rose 5' },
          { value: 26, name: 'rose 6' },
          { value: 22, name: 'rose 7' },
          { value: 18, name: 'rose 8' }
        ],
        label: {
          show: true,
          color: '#fff'
        }
      }
    ]
  }
  renderEchart(element, option)
})
</script>

<style scoped lang="less">
.chart {
  height: 100%;
  width: 100%;
}
</style>